<template>
  <el-dialog
      v-model="diaVisible"
      title="自动灯光设置"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="520px"
      @close="resetForm"
  >
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        label-width="auto"
        status-icon
        style=" margin-top: 30px"
    >
      <el-form-item label="自动灯光开启时间" prop="startTime">
<!--        <el-date-picker
            v-model="ruleForm.startTime"
            type="datetime"
            format="YYYY-MM-DD hh:mm:ss"
            value-format="YYYY-MM-DD hh:mm:ss"
            placeholder="请选择"
            style="width: 100%;"
        />-->
        <el-time-picker
            v-model="ruleForm.startTime"
            value-format="HH:mm:ss"
            placeholder="请选择" />
      </el-form-item>
      <el-form-item label="自动灯光关闭时间" prop="endTime">
<!--        <el-date-picker
            v-model="ruleForm.endTime"
            type="datetime"
            format="YYYY-MM-DD hh:mm:ss"
            value-format="YYYY-MM-DD hh:mm:ss"
            placeholder="请选择"
            style="width: 100%"
        />-->
        <el-time-picker
            v-model="ruleForm.endTime"
            value-format="HH:mm:ss"
            placeholder="请选择" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <div @click="submitForm" class="sure-btn" style="margin-right: 10px">确认</div>
        <div @click="resetForm" class="cancel-btn">取消</div>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {cronEnd, cronStart} from "../../../router/api.js";

export default {
  name: "setTime",
  data(){
    return {
      diaVisible: false,
      ruleForm: {
        startTime: '',
        endTime: ''
      },
      ruleFormClone: {},
    }
  },
  created() {
    this.ruleFormClone = JSON.parse(JSON.stringify(this.ruleForm))
  },
  methods:{
    show(){
      this.diaVisible = true;
    },
    async submitForm() {
      if(!this.ruleForm.startTime && !this.ruleForm.endTime) {
        // this.$message.warning('请设置时间');
        return;
      }

      if(this.ruleForm.startTime){
        let date = this.ruleForm.startTime.split(':');
        let s = date[2]+' '+date[1]+' '+date[0]+' * * *';
        await cronStart({ "cronStart": s })
      }
      if(this.ruleForm.endTime){
        let date = this.ruleForm.endTime.split(':');
        let e = date[2]+' '+date[1]+' '+date[0]+' * * *';
        await cronEnd({ "cronEnd": e })
      }
      this.resetForm()
      this.$emit('setTimeOk');
    },
    resetForm() {
      this.diaVisible = false;
      this.ruleForm = this.ruleFormClone;
      this.$refs['ruleFormRef'].resetFields();
    },
  }
}
</script>

<style scoped lang="scss">

</style>
